<template>
  <view>
<!--    <uni-nav-bar right-icon="plus" title="动圈" backgroundColor="#fba007" color="white" fixed height="129rpx"
      border="false" @clickRight="gotoTrendPublish" /> -->
    <view class="trend-box" v-for="(item, i) in modifiedTrendList" :key="i">
      <uni-card :title="item.nickName" :sub-title="item.createTime" :thumbnail="item.avatarUrl"
        shadow="0px 1px 2px 0.1px #ddd" :extra="item.position ? item.position : null">
        <view class="image-box" v-if="item.imageList.length > 1">
          <view class="image-item" v-for="(item2, i2) in item.imageList" :key="i2">
            <image class="image-img" @click="preview(i2, item.imageList)" mode="aspectFill" :src="item2"></image>
          </view>
        </view>

        <image class="image-box-img" style="width: 100%;" mode="widthFix" :src="item.imageList"
          v-if="item.imageList.length === 1"></image>
        <text class="uni-body uni-mt-5">{{item.content}}</text>
        <view slot="actions" class="card-actions">
          <view class="card-actions-item" @click="actionsClick('分享')">
            <uni-icons class="card-actions-item-icon" type="redo" size="18" color="#999"></uni-icons>
            <text class="card-actions-item-text">分享</text>
          </view>
          <view class="card-actions-item" @click="actionsClick('点赞')">
            <uni-icons type="heart" size="18" color="#999"></uni-icons>
            <text class="card-actions-item-text">点赞</text>
          </view>
          <view class="card-actions-item" @click="actionsClick('评论')">
            <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
            <text class="card-actions-item-text">评论</text>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name:"trend-list",
    computed: {
      ...mapState('m_trend', ['trendList'])
    },
    components: {},
    data() {
      return {
        modifiedTrendList: []
      };
    },
    onLoad() {
      this.getTrendList()
      console.log(this.modifiedTrendList)
    },
    methods: {
      ...mapMutations('m_trend', ['']),
    
      // 获取动态列表
      getTrendList() {
        // 将 createTime 参数转换为时间差字符串
        const modifiedTrendList = this.trendList.map(trend => {
          return {
            ...trend,
            createTime: this.getRelativeTime(trend.createTime)
          };
        });
        this.modifiedTrendList = modifiedTrendList
        console.log(this.modifiedTrendList)
      },
      //计算动态创建时间和当下时间的距离
      getRelativeTime(time) {
        const target = new Date(time);
        const now = new Date();
    
        const diff = now - target;
    
        const seconds = Math.floor(diff / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        const days = Math.floor(hours / 24);
        const months = Math.floor(days / 30);
        const years = Math.floor(months / 12);
    
        if (years > 0) {
          return years + '年前';
        } else if (months > 0) {
          return months + '月前';
        } else if (days > 0) {
          return days + '天前';
        } else if (hours > 0) {
          return hours + '小时前';
        } else if (minutes > 0) {
          return minutes + '分钟前';
        } else if (seconds > 10) {
          return seconds + '秒前';
        } else {
          return '刚刚';
        }
      },
    
      // 点击"发圈"按钮跳转发表页面事件
      gotoTrendPublish() {
        uni.navigateTo({
          url: '../../subpkg/trend-publish/trend-publish'
        })
      },
      onClick(e) {
        console.log(e)
      },
      actionsClick(text) {
        uni.showToast({
          title: text,
          icon: 'none'
        })
      },
      // 实现轮播图的预览效果
      preview(index, urls) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 预览时，默认显示图片的索引
          current: index,
          // 所有图片 url 地址的数组
          urls,
        })
      },
    
    
      calculateHeight(imageUrl) {
        // 假设你知道照片的实际宽高，可以根据以下代码计算高度
        const imageWidth = 500; // 照片的实际宽度
        const imageHeight = 500; // 照片的实际高度
        const containerWidth = 200; // 容器的宽度，可以根据实际情况调整
    
        const aspectRatio = imageHeight / imageWidth;
        const containerHeight = containerWidth * aspectRatio;
    
        return containerHeight;
      }
    }
  }
</script>

<style lang="scss">
  page {
    padding-bottom: 1rpx;
  }

  .trend-box {

    .image-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10rpx;
      // border: 1px solid red;

      .image-item {
        width: 200rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10rpx;
        margin-left: 1rpx;

        .image-img {
          width: 195rpx;
          height: 195rpx;
          background: whitesmoke;
          border-radius: 10rpx;
        }
      }
    }

    .image-box-img {
      background: whitesmoke;
      border-radius: 10rpx;
    }

    .card-actions {
      height: 42px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      // border: 1px solid red;
      // border-top: 1px #DCDCDC solid;
      border-top: 1px #eee solid;

      // padding: 10px 0;
      .card-actions-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .card-actions-item-icon {
          // top: 2px;
          text-align: center;
          // border: 1px solid red;
          // padding-top: 5px;
        }

        .card-actions-item-text {
          font-size: 12px;
          color: #6a6a6a;
          text-align: center;
          font-weight: 400;
          margin-left: 5px;
          margin-bottom: 2px;
          // border: 1px solid red;
          // padding-bottom: 5px;
        }
      }
    }
  }
</style>